<template>
    <div>
      <div v-for="n in 10">
        <div class="row">
          <md-button class="md-raised">Default</md-button>
          <div>{{ count }} this is template body, {{ n }}</div>
          <button @click='increment'>Increment +1</button>
          <router-link :to="{ name: 'context' }">home</router-link>
        </div>
      </div>
    </div>
</template>
<style>
    body{

    }

    .row {
        height: 10rem;
        border: 1px solid #333;
      }
</style>
<script>
  var Vue = require('vue')
  var VueMaterial = require('vue-material')
  require('vue-material/dist/components/mdButton/index.css')

  // The VueMaterial variable is global
  Vue.use(VueMaterial)

  Vue.material.theme.registerAll({
    default: {
      primary: 'blue',
      accent: 'red'
    },
    green: {
      primary: 'green',
      accent: 'pink'
    },
    orange: {
      primary: 'orange',
      accent: 'green'
    }
  })

  export default {
    data: function () {
      return {
        count: 1
      }
    },
    methods: {
      increment: function (event) {
        ++this.count
      }
    }
  }
</script>
